<template>
	<div id="app">
		<div class="box1" :style="{backgroundColor: color1}">
			<h2>我是父组件的盒子-我里面引用了子组件</h2>
			<HelloWorld title='我是第一次使用这个组件' @changeColor='cColor1'>
				<template v-slot:top>
					<div>我插槽 插入一个 div在内容上面</div>
				</template>
				<template v-slot:bottom='value'>
					<div :style="{color:value.aaaa}">我插槽插入一个div在内容下面</div>
				</template>
			</HelloWorld>
		</div>
		<div class="box1" :style="{backgroundColor: color2}">
			<h2>我是父组件的盒子-我里面引用了子组件</h2>
			<HelloWorld title='我是第二次使用这个组件' @changeColor='cColor2'>
				<template v-slot:top>
					<ol>
						<li>1.天青色等烟雨</li>
						<li>2.而我在等你</li>
						<li>3.将那小子拿下</li>
					</ol>
				</template>
				<template v-slot:bottom='value'>
					<div :style="{color:value.aaaa}">
						<i>神回复｜马拉多纳有“上帝之手”，C罗有“上帝之发”！为啥巴西比赛的焦点都在观众席？</i>
					</div>
				</template>
			</HelloWorld>
		</div>
		<div class="box1" :style="{backgroundColor: color3}">
			<h2>我是父组件的盒子-我里面引用了子组件</h2>
			<HelloWorld title='我是第三次使用这个组件' @changeColor='cColor3'>
				<template v-slot:top>
					<table border="1" style="border-collapse: collapse;">
						<thead>
							<tr>
								<th>日期</th>
								<th>姓名</th>
								<th>地址</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>2016-05-03</td>
								<td>王小虎</td>
								<td>上海市普陀区金沙江路 1518 弄</td>
							</tr>
							<tr>
								<td>2016-05-03</td>
								<td>王小虎</td>
								<td>上海市普陀区金沙江路 1518 弄</td>
							</tr>
							<tr>
								<td>2016-05-03</td>
								<td>王小虎</td>
								<td>上海市普陀区金沙江路 1518 弄</td>
							</tr>
						</tbody>
					</table>
				</template>
			</HelloWorld>
		</div>
	</div>
</template>

<script>
	import HelloWorld from './components/HelloWorld.vue'

	export default {
		name: 'App',
		components: {
			HelloWorld,

		},
		data() {
			return {
				color1: '#000',
				color2: '#000',
				color3: '#000'
			}
		},
		methods: {
			cColor1(val) {
				console.log(val, 1);
				this.color1 = val
			},
			cColor2(val) {
				console.log(val, 2);
				this.color2 = val
			},
			cColor3(val) {
				console.log(val, 3);
				this.color3 = val
			}
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	#app {
		color: #fff;
		display: flex;
	}

	.box1 {
		padding: 20px;
		margin: 20px;
	}
</style>
